<style lang="less">
@import "@/styles/table-common.less";
.btn-box {
  // padding: 10px 12px 10px 0;
  height: 32px;
  display: flex;
  align-items: center;
  span {
    margin-left: 15px;
  }
}
.detail-modal {
  .refund-num {
    margin-top: 15px;
  }
  .detail-tab {
    border-top: 1px solid #e8eaec;
    border-left: 1px solid #e8eaec;
    li {
      display: flex;
      align-items: center;
      height: 55px;
      text-align: center;
      font-size: 14px;
      color: #515a6e;
      span {
        height: 100%;
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #e8eaec;
        border-bottom: 1px solid #e8eaec;
      }
      &.t-tit {
        font-weight: bold;
        height: 40px;
      }
    }
  }
}
.verifyCode-cont {
  display: flex;
  flex-direction: column;
  padding-top: 3px;
  color: #2d8cf0;
  cursor: pointer;
  span {
    &:nth-child(1) {
      border-bottom: 1px solid #2d8cf0;
    }
    &:nth-child(2) {
      color: #333;
    }
  }
}
</style> 
<template>
  <div class="search">
    <Card>
      <!-- <Row class="operation">
        <Button @click="add" type="primary" icon="md-add">添加</Button>
      </Row> -->
      <!-- /xboot/scSite/getAll -->
      <!-- 预约场地  companyName -->
      <Form ref="searchForm" :model="searchForm" inline :label-width="100">
        <Row v-show="openSearch" @keydown.enter.native="handleSearch">
          <FormItem label="活动名称：">
            <Select
              v-model="searchForm.companyName"
              transfer
              placeholder="请选择"
              style="width: 200px"
            >
              <Option
                v-for="item in scSiteList"
                :key="item.id"
                :value="item.title"
                >{{ item.title }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="订单编号：">
            <Input
              type="text"
              v-model="searchForm.orderNo"
              clearable
              placeholder="请输入订单编号"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="订单发起人：">
            <Input
              type="text"
              v-model="searchForm.realName"
              clearable
              placeholder="请输入订单发起人"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="联系方式：">
            <Input
              type="text"
              v-model="searchForm.uMobile"
              clearable
              placeholder="请输入联系方式"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="订单状态：">
            <Select
              v-model="searchForm.status"
              transfer
              placeholder="请选择"
              style="width: 200px"
            >
              <Option
                v-for="item in orderStatusList"
                :key="item.id"
                :value="item.status"
                >{{ item.title }}</Option
              >
            </Select>
          </FormItem>
          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
          </FormItem>
        </Row>
      </Form>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        sortable="custom"
        ref="table"
      >
        <template slot-scope="{ row }" slot="verifyCode">
          <div
            @click="showVerifyCode(row)"
            class="verifyCode-cont"
            v-if="row.verifyCodeNum > 0"
          >
            <span>{{ row.verifyCode }}</span>
            <span
              >{{ row.orderActives | orderActiveLength }}/{{
                row.verifyCodeNum
              }}</span
            >
          </div>
        </template>
        <template slot-scope="{ row }" slot="activityTime">
          <div>
            <div v-for="item in row.activity.activityValidTimes" :key="item.id">
              {{ item.validStartDate }}至 {{ item.validEndDate }}
            </div>
            <div>{{ row.activity.startDate }}- {{ row.activity.endDate }}</div>
          </div>
        </template>
        <template slot-scope="{ row }" slot="count">
        
            <div>{{ row.activity.count }}</div>
         
        </template>
         <template slot-scope="{ row }" slot="price">
        
            <div>{{ row.activity.price }}</div>
         
        </template>
      </Table>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <addEdit
      :data="formData"
      :type="showType"
      v-model="showUser"
      @on-submit="handleReset"
    />
    <Modal v-model="modal" title="激活详情" @on-ok="ok" @on-cancel="cancel">
      <div class="detail-modal">
        <ul class="detail-tab">
          <li class="t-tit">
            <span>场地名称</span>
            <span
              >激活人({{ orderActivesNums.downNum }}/{{
                orderActivesNums.totalNum
              }})</span
            >
            <span>激活人手机</span>
            <span>激活时间</span>
          </li>
          <li v-for="item in detailData" :key="item">
            <span>{{ detailProductName }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.mobile }}</span>
            <span>{{ item.createTime }}</span>
          </li>
        </ul>
        <div class="refund-num">未激活次数：{{ orderActivesNums.sub }}</div>
      </div>
      <div slot="footer"></div>
    </Modal>
    <Modal v-model="modal1" title="订单详情" width="700">
      <div class="oder-detail">
        <Form ref="form" label-position="right" :label-width="100">
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="订单号:">
                <Input :value="detailData1.orderNo" readonly />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="发起人姓名:">
                <Input :value="detailData1.realName" readonly />
              </FormItem>
            </Col>
          </Row>
          <Row
            :gutter="32"
            v-for="item in detailData1.orderDetails"
            :key="item.id"
          >
            <Col span="12">
              <FormItem label="发起时间:">
                <Input :value="item.startDate" readonly />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="结束时间:">
                <Input :value="item.endDate" readonly />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="24">
              <FormItem label="取消原因:">
                <Input
                  type="textarea"
                  :value="detailData1.refundReasonWapExplain"
                  readonly
                />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div slot="footer"></div>
    </Modal>
    <Modal v-model="modalSet" :title="modalSetTit">
      <Form
        ref="formSet"
        :rules="ruleFormSet"
        :model="formSet"
        label-position="right"
        :label-width="100"
      >
        <Row :gutter="32" v-if="modalType == '1'">
          <Col span="24">
            <FormItem label="支付处理:" prop="price">
              <Select
                v-model="formSet.productId"
                transfer
                placeholder="请选择"
                style="width: 200px"
              >
                <Option
                  v-for="item in scSiteList"
                  :key="item.id"
                  :value="item.title"
                  >{{ item.title }}</Option
                >
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32" v-if="modalType == '2'">
          <Col span="24">
            <FormItem label="支付处理:" prop="price">
              <Input v-model="formSet.price" />
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32" v-if="modalType == '3'">
          <Col span="24">
            <FormItem label="取消原因:" prop="remark">
              <Input type="textarea" v-model="formSet.remark" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button
          type="primary"
          size="large"
          :loading="submitLoading"
          @click="submitFormSet"
          >保存</Button
        >
        <!-- <Button size="large" @click="cancel">取消</Button> -->
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  scMeetRoomUpdStatusById,
  getScOrderByCondition,
  getAllByTypeData,
  scOrderPayDeposit,
  scOrderManageCancel,
} from "@/api/index";

import { shortcuts } from "@/libs/shortcuts";
import addEdit from "./addEdit.vue";
export default {
  name: "user-manage",
  components: {
    addEdit,
  },
  data() {
    return {
      message: "",
      height: 510,
      showUser: false,
      showType: "0",
      loading: true,
      selectDate: "",
      openSearch: true,
      idenList: [], //角色状态
      options: {
        shortcuts: shortcuts,
      },
      orderTypeList: [
        { id: "0", title: "已取消" },
        { id: "1", title: "已完成" },
      ],
      searchForm: {
        pageNumber: 1,
        pageSize: "10",
        sort: "createTime",
        order: "desc",
      },
      columns: [
        {
          title: "预约单号",
          key: "orderNo",
          minWidth: 220,
          align: "center",
          fixed: "left",
        },
        {
          title: "活动名称",
          key: "title",
          width: 220,
          align: "center",
          render: (h, params) => {
            let nodeTxt = "";
            nodeTxt = params.row.activity.title;
            return h("span", nodeTxt);
          },
        },

        {
          title: "订单发起人",
          key: "realName",
          width: 220,
          align: "center",
        },
        {
          title: "订单发起时间",
          key: "createTime",
          width: 220,
          align: "center",
        },
        {
          title: "联系方式",
          key: "umobile",
          width: 180,
          align: "center",
        },
        {
          title: "活动时间",
          //循环orderDetails
          width: 220,
          align: "center",
          slot: "activityTime",
        },

        {
          title: "参与人数",
          key: "count",
          width: 160,
          align: "center",
          slot: "count",
        },
        {
          title: "活动价格",
          key: "price",
          width: 100,
          align: "center",
          slot: "price",
        },
        {
          title: "活动邀请码",
          key: "verifyCode",
          width: 200,
          align: "center",
          slot: "verifyCode",
        },
        {
          title: "总价",
          key: "totalPrice",
          width: 100,
          align: "center",
        },
        {
          title: "积分类型",
          key: "createTime",
          width: 220,
          align: "center",
          render: (h, params) => {
            let txt = this.publicFun.integralType(params.row.useIntegralType);
            return h("span", [txt]);
          },
        },
        {
          title: "积分数量",
          key: "useIntegral",
          width: 170,
          align: "center",
        },
        {
          title: "最后支付金额",
          key: "deposit",
          width: 170,
          align: "center",
        },
        {
          title: "支付类型",
          key: "payType",
          width: 100,
          align: "center",
          render: (h, params) => {
            let txt = this.publicFun.paySubType(params.row.paySubType);
            return h("span", [txt]);
          },
        },
        {
          title: "订单状态",
          key: "status",
          width: 100,
          align: "center",
          render: (h, params) => {
            let txt = this.publicFun.orderStatus(params.row.status);
            return h("span", [txt]);
          },
        },
        // {
        //   title: "用途描述",
        //   key: "useDesc",
        //   width: 170,
        //   align: "center",
        // },
        {
          title: "操作",
          key: "createTime",
          width: 300,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            // let enableOrDisable = "";
            // if (params.row.status == 0) {
            //   enableOrDisable = h(
            //     "a",
            //     {
            //       on: {
            //         click: () => {
            //           this.chageable(params.row, -1);
            //         },
            //       },
            //     },
            //     "禁用"
            //   );
            // } else {
            //   enableOrDisable = h(
            //     "a",
            //     {
            //       on: {
            //         click: () => {
            //           this.chageable(params.row, 0);
            //         },
            //       },
            //     },
            //     "启用"
            //   );
            // }
            return h("div", [
              h(
                "a",
                {
                  on: {
                    click: () => {
                      // this.seeting();
                      // this.formData = params.row;
                      this.modal1 = true;
                      this.detailData1 = params.row;
                      console.log(params.row);
                    },
                  },
                },
                "详情"
              ),
              // h("Divider", {
              //   props: {
              //     type: "vertical",
              //   },
              // }),
              // h(
              //   "a",
              //   {
              //     on: {
              //       click: () => {
              //         // this.orderSet(1, params.row);
              //         let status = params.row.status;
              //         if (
              //           status == "4" ||
              //           status == "6" ||
              //           status == "8" ||
              //           status == "10"
              //         ) {
              //           this.$Message.info("该订单不能调整");
              //           return;
              //         }
              //         this.formData = params.row;
              //         this.add();
              //       },
              //     },
              //   },
              //   "订单调整"
              // ),
              // h("Divider", {
              //   props: {
              //     type: "vertical",
              //   },
              // }),

              // h(
              //   "a",
              //   {
              //     on: {
              //       click: () => {
              //         if (
              //           params.row.paySubType == "2" &&
              //           params.row.status != "8"
              //         ) {
              //           this.orderSet(2, params.row);
              //         } else {
              //           this.$Message.info("该订单不能支付处理");
              //         }
              //       },
              //     },
              //   },
              //   "支付处理"
              // ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  on: {
                    click: () => {
                      if (
                        params.row.status == "10" ||
                        params.row.status == "8"
                      ) {
                        this.$Message.info("该订单不能取消");
                        return;
                      }
                      this.orderSet(3, params.row);
                    },
                  },
                },
                "取消订单"
              ),
            ]);
          },
        },
      ],
      modal: false,
      modal1: false,
      data: [],
      formData: {},
      scSiteList: [],
      orderStatusList: [
        { status: 1, title: "未支付" },
        { status: 2, title: "未接单" },
        { status: 3, title: "待取餐" },
        { status: 4, title: "已取餐" },
        { status: 5, title: "已购买" },
        { status: 6, title: "已完成" },
        { status: 7, title: "已预约" },
        { status: 9, title: "已结束" },
        { status: 9, title: "已支付" },
        { status: 10, title: "已取消" },
        { status: 11, title: "已付定金" },
      ],
      detailData1: { orderDetails: [] },
      orderActivesNums: {},
      modalSet: false,
      modalSetTit: "",
      formSet: {},
      ruleFormSet: {
        price: [{ required: true, message: "请输入金额", trigger: "blur" }],
        remark: [
          { required: true, message: "请输入取消原因", trigger: "blur" },
        ],
      },
      modalType: "",
    };
  },
  methods: {
    init() {
      this.getDataList();
      this.getScSiteAllData();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    getDataList() {
      // 多条件搜索用户列表
      this.loading = true;
      getScOrderByCondition({ ...this.searchForm, orderType: 5 }).then(
        (res) => {
          this.loading = false;
          if (res.success) {
            this.data = res.result.content;
            this.total = res.result.totalElements;
            if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
              this.searchForm.pageNumber -= 1;
              this.getDataList();
            }
          }
        }
      );
    },

    add() {
      this.showType = "2";
      this.showUser = true;
    },
    seeting() {
      this.showType = "1";
      this.showUser = true;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.selectDate = "";
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.searchForm.companyName = "";
      this.searchForm.orderNo = "";
      this.searchForm.realName = "";
      this.searchForm.uMobile = "";
      this.searchForm.status = "";

      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.getDataList();
    },
    enable(v) {
      this.$Modal.confirm({
        title: "确认启用",
        content: "您确认要启用用户 " + v.title + " ?",
        loading: true,
        onOk: () => {
          enableUser(v.id).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    chageable(v, status) {
      let statusTxt = status == 0 ? "启用" : "禁用";
      this.$Modal.confirm({
        title: `确认${statusTxt}`,
        content: `您确认要${statusTxt}` + v.title + " ?",
        loading: true,
        onOk: () => {
          scMeetRoomUpdStatusById({ id: v.id, status }).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    cancel() {},
    ok() {},
    getScSiteAllData() {
      getAllByTypeData('scActivity').then((res) => {
        if (res.success) {
          this.scSiteList = res.result;
        }
      });
    },
    showVerifyCode(val) {
      console.log(val);
      if (val.orderActives && val.orderActives.length > 0) {
        this.modal = true;
        let downNum = 0;
        if (val.orderActives || val.orderActives.length > 0) {
          downNum = val.orderActives.length;
        }
        let totalNum = val.verifyCodeNum;
        this.detailData = val.orderActives;
        this.orderActivesNums = {
          sub: totalNum - downNum,
          downNum,
          totalNum,
        };
      } else {
        this.$Message.info("暂无激活");
      }
      if (val.orderDetails.length > 0) {
        this.detailProductName = val.site.title;
      }
    },
    orderSet(type, val) {
      this.$refs.formSet.resetFields();
      if (type == 1) {
        this.modalSetTit = "订单调整";
      } else if (type == 2) {
        this.modalSetTit = "支付处理";
      } else if (type == 3) {
        this.modalSetTit = "取消订单";
      }
      this.modalType = type;
      this.modalSet = true;
      this.detailData1 = val;
      this.formSet = {};
    },
    submitFormSet() {
      console.log(this.detailData1);
      this.$refs.formSet.validate((valid) => {
        if (valid) {
          if (this.modalType == "2") {
            if (
              this.formSet.price >
              this.detailData1.totalPrice - this.detailData1.deposit
            ) {
              this.$Message.warning("输入金额大于当前未付金额");
              return;
            }
            let obj = {
              orderId: this.detailData1.id,
              price: this.formSet.price,
            };
            scOrderPayDeposit(obj).then((res) => {
              if (res.success) {
                // this.formSet.num = "";
                this.$Message.success("操作成功");
                this.modalSet = false;
                this.getDataList();
              }
            });
          }
          if (this.modalType == "3") {
            let obj = {
              orderId: this.detailData1.id,
              remark: this.formSet.remark,
            };
            scOrderManageCancel(obj).then((res) => {
              if (res.success) {
                this.$Message.success("操作成功");
                this.modalSet = false;
                this.getDataList();
              }
            });
          }
        }
      });
      // console.log(this.detailData1)
    },
  },
  created() {},
  mounted() {
    // 计算高度
    this.height = Number(document.documentElement.clientHeight - 230);
    this.init();
  },
};
</script>